// 创建对象
let lineChart = echarts.init(document.querySelector('.mid'));
// 发送请求
fetch('https://edu.telking.com/api/?type=month')
    .then((response) => {
        // 判断响应状态
        if (response.status >= 200 && response.status < 300) {
            // 处理数据
            response.json().then((data) => {
                var option = {
                    title: {
                        text: '曲线图数据展示',
                        left: 'center',
                        top: '5%'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.data.xAxis,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        // 格式化y轴数据
                        axisLabel: {
                            formatter: '{value} 人'
                        }
                    },
                    grid: {
                        // 调整图标上下边距
                        top: '25%',
                        bottom: '14%',
                        left: '10%',
                        right: '5%'
                    },
                    series: [
                        {
                            type: 'line',
                            data: data.data.series,
                            smooth: true,
                            // 显示坐标数据
                            label: {
                                show: true
                            },
                            // 区域颜色
                            areaStyle: {
                                color: 'lightblue',
                                opacity: 0.3
                            }
                        }
                    ]
                }
                // 渲染
                lineChart.setOption(option);
            })
        } else {
            alert('请求失败：' + response.status)
        }
    })

